Разработка сайта БТА Банка

btabank.by

БТА Банк является частным банком с казахстанским капиталом. Фиксированные ставки на кредиты и депозиты, возможность беспрепятственно осуществить перевод или плятеж в любую точку мира, выгодно отличают банк от конкурентов. Многие годы БТА Банк развивал традиционные офлайн-каналы продаж. Основной доход генерировал обслуживание корпоративных клиентов и предпринимателей. Однако в 2023 году Банк принял решение о цифровизации услуг и разработке принципиального новой и удобной не только для бизнес-клиентов, но и для частных лиц, онлайн-витрины.

Проект включал

Бизнес-анализ
Исследование ЦА
Дизайн
Верстка
Программирование

Команда

2 Project-менеджера
1 UX/UI дизайнер
1 frontend-разработчик
1 вackend-разработчик
2 тестировщика

Длительность

6 месяцев

Год запуска

2024

Задача: Разработка сайта БТА Банка для продвижения продуктов и услуг банка с фокусом на современный дизайн и интуитивно-понятный контент

Начнем со стиля

Работу со стилем мы вели параллельно с исследованием. И уже на полпути было очевидно, что банку совершенно не хватает изюминки, сайт выглядел невзрачно и слишком строго.

У нас было несколько задач:

1) Не испугать новым ярким образом текущих пользователей.

2) Привлечь больше новой и молодой ЦА.

3) Сохранить историческое сочетание цветов красного и зеленого.

И мы приступили к работе. Первое, приняли стратегическое решение: разделить цвета на сценарии использования. Красный цвет используем исключительно как декоративный цвет, но не заполняющий, а зеленый делаем акцентным, и даем ему возможность проявить себя во всей красе.

Небанальность формы, изогнутые линии и не нужно строгости

Иконки — это один из стилеполагающих элементов на сайте. Они задают позитивный настрой своими игривыми формами и дают возможность выразить цельность бренда на каждой странице.

Типографика с уклоном на mobile

В типографике выбор пал на сondensed (узкий) шрифт – DIN 2014. Это не просто эстетический выбор, это стратегический ход в эпоху мобильных устройств. Такой шрифт не только прекрасно читается, но и позволяет вместить больше текста на ограниченном пространстве экрана телефона, без ущерба для читаемости или визуальной привлекательности.

Калькуляторы

Персонализация условий продукта — мастхэв сегодняшнего дня. Калькуляторы дают возможность предложить каждому клиенту разные варианты условий в зависимости от запроса.

На сайте мы реализовали калькуляторы по кредитам и депозитам. Из особенностей можно выделить изменение процента в зависимости от стоимости или срока. Недоверие в финансовой сфере — частое явление, поэтому, помимо калькулятора, мы предоставляем возможность ознакомиться с подробными условиями в адаптированной под телефоны таблице под калькулятором.

Mobile First

Не стоит объяснять важность телефона для молодых людей и даже для бизнесменов. Поэтому принцип Mobile First стал девизом в проектировании дизайна.

Все таблицы, формы, блоки обратной связи, баннеры – все это мы разрабатывали в первую очередь с учетом удобства использования на телефонах, а затем адаптировали под большие экраны. Этот принцип важен при разработке любого сайта сегодня.

Бизнес направление

Проблема, характерная для большинства сайтов с бизнес направлением в том, что всеми было решено, будто бы бизнесмены предпочитают скучный и . формальный контент. На выходе получается сухая инструкция, вместо приятного сайта.

Мы забыли, что за мониторами сидят не роботы, а люди. Даже бизнесмены ценят, когда к ним обращаются ясными и увлекательными сообщениями. Поэтому мы рассказали о бизнесе так, чтобы это было понятно начинающему бизнесмену и интересно опытному.

Сложные условия про продуктам не равно сложный интерфейс

При разработке страниц мы столкнулись с сложной системой критериев по картам. А именно одна карта может быть как зарплатной, так и накопительный и платежной, но с разными условиями.

Решением стал переключатель, который полностью меняет контент на сайте, фактически создавая три разные страницы, но визуально для пользователя это выглядит как одна. Также мы тщательно поработали над контентом, чтобы условия были понятны уже после первой прокрутки страницы.